<template>
	<div class="header_box">
		<!--顶部-->
		<div class="top">
			<div class="container">
				<ul>
					<li class="favorite"><a href="">欢迎进入编程在线</a></li>
					<li class="mobilephone"><a href="">下载手机客户端</a></li>
					<li class="email">反馈邮箱:gongyuying@sina.cn</li>
					<li class="telephone">客服热线：1111-2222-3333</li>
				</ul>
			</div>
		</div>

		<!--header-->
		<header class="header">
			<div class="container">
				<h1 class="logo"><a href="index.html"></a></h1>
				<div class="h_right">
					<div class="search">
						<input type="text" placeholder="课程搜索" /><button type="button"></button>
					</div>
					<div class="h_cart">
						<router-link to="/cart"><em class="icon-cart"></em>我的购物车(<strong id="cart_sum">0</strong>)<em class="icon-arrows"></em></router-link>
						<div class="cart_dropdown">
							<h3 v-if="!$store.state.userInfo.uid">请登录后查看您的购物车</h3>
							<!-- template不会影响元素结点，不会影响DOM树 -->
							<template v-else>
								<!-- <h3>您的购物车为空~</h3> -->
								<ul>
									<li class="clearfloat">
										<a href=""><img src="img-course/01.png" alt="" /></a>
										<dl>
											<dt><a href="">HTML零基础入门零基础入门零基础入门</a></dt>
											<dd>¥599.00 <span>x 2</span></dd>
										</dl>
										<em class="icon-remove"></em>
									</li>
									<li class="clearfloat">
										<a href=""><img src="img-course/02.png" alt="" /></a>
										<dl>
											<dt><a href="">HTML零基础入门</a></dt>
											<dd>¥599.00 <span>x 1</span></dd>
										</dl>
										<em class="icon-remove"></em>
									</li>
								</ul>
								<div class="sum clearfloat">
									<p>共计：<span>¥1298.00</span></p>
									<a href="">去结算</a>
								</div>
							</template>

						</div>
					</div>
				</div>
			</div>
		</header>

		<!--导航-->
		<nav class="navbar">
			<div class="container">
				<div class="nav">
					<ul>
						<li>
							<router-link to="/">首页</router-link>
						</li>
						<li>
							<router-link to="/course">全部课程</router-link>
						</li>
						<li v-for="(t, i) in $store.state.courseTypes" :key=i>
							<!-- <router-link :to="'/course?type='+t.tpid">{{t.tpname}}</router-link> -->
							<!-- 点击router-link相当于点击router.push 
							    如果目的地和当前路由相同，只有参数发生了变化，需要使用beforeRouteUpdate来响应这个变化
							-->
							<!-- [{"tpid":1,"tpname":"基础课程"},{"tpid":2,"tpname":"核心课程"},{"tpid":3,"tpname":"进阶课程"}] -->
							<!-- <router-link :to="{path:'/course',query:{type:t.tpid,tpname:t.tpname}}">{{t.tpname}}</router-link> -->
							<router-link :to="{path:'/course',query:{type:t.tpid,tpname:t.tpname}}">{{t.tpname}}</router-link>
						</li>
						<li>
							<router-link to="/teachers">名师堂</router-link>
						</li>
						<li>
							<router-link to="/address">校区</router-link>
						</li>
					</ul>
				</div>
				<div class="nav_user">
					<!-- 登录前-->
					<p v-if="!this.$store.state.userInfo.uid">
						<router-link to="/login">登录</router-link> |
						<router-link to="/register">注册</router-link>
					</p>
					
					 
					
                    <template v-else>
						<!-- 鼠标进入时，下方div显示 ，鼠标离开时div隐藏-->
						<router-link to="" ><em class="icon-user"></em>{{$store.state.userInfo.uname}}的个人中心<em class="icon-triangle"></em></router-link>
						
						<div class="user_dropdown" >
							<p><span>{{$store.state.userInfo.uname}}</span>，您好~<br>您在编程在线共购买了<span>6</span>门课程。</p>
							<div class="userlink_1 clearfloat">
								<router-link to="">我购买的课程</router-link>
								<router-link to="">我的收藏</router-link>
							</div>
							<div class="userlink_2 clearfloat">
								<router-link to="">进入个人中心</router-link>
								<!-- //点击退出登录，删除本地存储 -->
								<button @click="deletelocal()">退出登录</button>
							</div>
						</div>
					</template> 

				</div>
			</div>
		</nav>
	</div>
</template>

<script>
	export default {
		//鄙视题：为什么vue实例里直接是对象，而组件里必须是函数返回对象
		//组件多实例，vue对象单一实例
		//根本原因：全局的vue实例唯一，但是每一个组件的实例，在一个页面中有多个，所以用对象
		data: () => {
			return {
				age: 20,
				
			}
		},
		mounted() {
			//若组件挂载完成，异步获取课程类型
			this.$http.get('/type').then(res => {
				// console.log(res.data); //response.data就是响应消息猪蹄
				//把服务器返回的课程类型保存在vuex
				this.$store.commit('setCourseTypes', res.data);
			}).catch(err => {
				console.log(err);
			});
			
		},
		methods:{
			deletelocal(){
				console.log("点击了退出登录")
				//删除localstorage中的数据
				localStorage.removeItem('userInfo');
				this.$store.commit("setUserInfo",{})
			}
		},
		components: {

		}
	}
</script>

<style scoped>
	.disblock{
		display:block;
	}

</style>
